<template>
	<div class="wrap">
		<v-top :top="top"></v-top>
		<section class="main">
			<div class="repayList" v-for="item in repayList">
				<p class="tit">
					<b class="fz28">还款日 {{ item.date }}</b>
					<span class="fr fz26 col6">{{ item.stage }}</span>
				</p> 
				<p class="tit">
					<b class="fz26 col6">已还款 {{ item.ok }}</b>
					<span class="fr fz28">{{ item.overdue }}</span>
				</p> 
				<p class="pt20">
					应还本金<span>{{ item.Principal }}</span>
				</p> 
				<p>
					应还利息<span>{{ item.Interest }}</span>
				</p> 
				<p>
					管理费<span>{{ item.Admin }}</span>
				</p> 
				<p>
					逾期费用<span>{{ item.overdueM }}</span>
				</p> 
				<p>
					已还款<span>{{ item.repaid }}</span>
				</p> 
				<p class="fz26 pt20 all">
					<strong>应还总额<span>{{ item.sum }}</span></strong>
				</p>
			</div>
			<router-link tag='span' to="" class="subBtn">还款</router-link>	
		</section>
	</div>
</template>

<script>
import vTop from './public/subTop'
export default {
   	data() {
      	return {
      		top : ['我的还款','','还款记录'],
      		repayList : [
      			{
      				date : '2016-1-13',
      				stage : '2/3期',
      				ok : '0',
      				overdue : '已逾期',
      				Principal : '1000',
      				Interest : '70',
      				Admin : '120',
      				overdueM : '134',
      				repaid : '0',
      				sum : '1134'
      			}
      		]
      	}
   	},
   	methods : {

   	},
   	created() {
   		this.$store.commit('sum2',this.repayList.length); 
   	},
   	components : {
   		vTop
   	}
}
</script>

<style lang="">
	.repayList{padding: 0.05rem 0.1rem; background: #fff; font-size: 0.12rem; margin-top: 0.1rem;}
	.repayList .tit{line-height: 0.22rem;}
	.repayList span{float: right;}
	.repayList p{line-height: 0.19rem; color: #333; overflow: hidden;}
	.repayList .pt20{padding-top: 0.1rem;}
	.subBtn{width:100%; line-height: 0.36rem; background: #3297fd; color: #fff; text-align: center; line-height: 0.36rem; display: block; cursor: pointer; font-size: 0.16rem; margin-top: 0.05rem;}
</style>